<template>
  <div class="myCarousel">
    <el-icon :class="{disabled:offsetNumber === 0 || showNumber >= list.length}" @click="reduceOffset">
      <DArrowLeft/>
    </el-icon>
    <div class="carouselContainer">
      <div class="content">
        <div v-for="(item, index) in list" class="carouselItem">
          <slot :item="item" :index="index"></slot>
        </div>
      </div>
    </div>
    <el-icon :class="{disabled:disableRight}" @click="addOffset">
      <DArrowRight/>
    </el-icon>
  </div>
</template>

<script setup>
import {
  DArrowLeft,
  DArrowRight
} from '@element-plus/icons-vue';
// 接受props
const props = defineProps(['showNumber', 'gap', 'list']);

// 转换为ref
const {showNumber, gap, list} = toRefs(props);
const initProps = () => {
  if (!showNumber.value) {
    showNumber.value = 4;
  }
  if (!gap.value) {
    gap.value = 10 + 'px';
  }
};
initProps();

// 计算偏移的数量
const offsetNumber = ref(0);
// 右箭头不可点击
const disableRight = computed(() => {
  if(list.value.length <= showNumber.value) {
    return false;
  }
  return offsetNumber.value >= Math.floor(list.value.length / showNumber.value);
});

const addOffset = () => {
  if (offsetNumber.value < Math.floor(list.value.length / showNumber.value)) {
    offsetNumber.value++;
  }
};
const reduceOffset = () => {
  if (offsetNumber.value > 0) {
    offsetNumber.value--;
  }
};


</script>

<style scoped lang="scss">
.myCarousel {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 30px;
  .el-icon {
    cursor: pointer;
  }

  .el-icon:hover {
    color: red
  }

  .carouselContainer {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    .content {
      display: flex;
      flex: 1;
      flex-direction: row;
      transition: all 1s ease-in-out;
      transform: translateX(calc(-1 * ((100% - (v-bind(gap) * (v-bind(showNumber) - 1)) + 60px) / v-bind(showNumber)) * v-bind(offsetNumber)));
      gap: v-bind(gap);
      .carouselItem {
        display: flex;
        width: calc((100vw - (v-bind(gap) * (v-bind(showNumber) - 1)) - 60px - 200px - 20px)/ v-bind(showNumber));
        flex-shrink: 0;
      }
    }
  }
}
</style>
